<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="game" :model="game" label-width="120px" v-loading.fullscreen.lock="fullscreen">
                <el-form-item label="游戏名称">
                    <el-input v-model="game.name"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload class="avatar-uploader" :data="pic" :action="getLocation" v-loading.fullscreen.lock="fullscreenLoading" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="game.img" :src="ip+game.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸: 300*200像素</span>
                </el-form-item>
                <el-form-item label="点击上传zip包">
                    <el-upload :file-list="filelist" :data="game_zip" :limit="limit" :action="get_video_Location" list-type="picture" v-loading.fullscreen.lock="fullscreenLoading" :on-success="list_handleAvatarSuccess" :on-remove="zip_remove" :before-upload="beforeAvatarUpload_zip">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add('city')">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, ip, movie_location } from '../../utils/local.js'
import { editGame } from '../../api/server.js'
import { mapState } from 'vuex'
import { onSuccess } from '../../utils/quill.js'

export default {
    data() {
        return {
            fullscreen: false,
            fullscreenLoading: false,
            getLocation: pic_location,
            get_video_Location: movie_location,
            pic: {},
            filelist: [],
            game_zip: {},
            ip: ip,
            limit: 1
        }
    },
    created() {
        let game = this.game
        if (game.game_zip) {
            let obj = {}
            obj.name = game.game_zip_name
            obj.url = game.game_zip
            this.filelist.push(obj)
        }
    },
    computed: mapState({
        game: state => state.Third.game
    }),
    methods: {
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.fullscreenLoading = false
                // this.ad.img = res.result.resultMap
                this.game.img = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            console.log('上传')
            this.pic.pictureFile = file
            this.pic.width = 300 * 3
            this.pic.height = 200 * 3
            return this.upload(file)
        },
        beforeAvatarUpload_zip(file) {
            this.game_zip.movieFile = file
            return this.upload(this.game_zip)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        add(from) {
            let game = this.game
            console.log('game:', game)
            if (game.name == undefined || game.name.length === 0) {
                this.$message.error('请填写标题')
                return
            }
            if (this.filelist.length == 0) {
                this.$message.error('请上传zip包')
                return
            }
            game.game_zip = this.filelist[0].url
            game.game_zip_name = this.filelist[0].name
            editGame(game)
                .then(res => {
                    this.$message.success('修改成功')
                })
        },
        list_handleAvatarSuccess(res) {
            if (res.code === '000000') {
                let obj = {}
                obj.name = res.result.fileName
                obj.url = res.result.filePath
                this.filelist.push(obj)
                this.fullscreenLoading = false
            }
        },
        zip_remove(file, filelist) {
            this.filelist = filelist
        },
        back() {
            this.$router.go(-1)
        }
    },

}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.avatar-uploader {
  width: 300px;
  height: 200px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 200px;
  display: block;
}
.tips {
  color: gray;
  margin-left: 10%;
}
</style>